/*
* @Author: name
* @Date:   2018-10-03 08:02:35
* @Last Modified by:   name
* @Last Modified time: 2018-10-04 09:49:11
*/

 // 这个配置文件起始就是一个js文件
// 这个文件起到打包的作用，通过node中的模块作用，向外暴露了一个配置对象
const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')

const { VueLoaderPlugin }  = require('vue-loader')


  // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
    // 在配置文件中需要手动指定入口和出口
    entry:path.join(__dirname,'./src/main.js'), //入口----表示，要使用webpack打包的文件
    output:{
        path:path.join(__dirname,'./dist'),//出口----指定打包好的文件，输出到哪个目录中去
        filename:'bundle.js' //这是指定输出文件的路径
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            { test:/\.css$/,use:['style-loader','css-loader'] },
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] },
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
            { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ },
            { test:/\.vue$/, use: 'vue-loader' }
        ]
    },
    resolve:{
        alias:{  //修改vue 被导入时候的包的路径
            //"vue$":"vue/dist/vue.js"
        }
    }
}